<!-- 我的待办组件 -->
<template>
    <view class="list_item">
        <view class="card" @click="toInfoPage()">
            <view class="top">
                <view>承运单号:{{ item.billNo || '暂无数据'  }}
                    <Order size="10" @click="copy(item.billNo)" />
                </view>
                <view class="status">{{ item.statusVal }}</view>
            </view>
            <view class="center">
                <view>
                    <view class="content">{{ item.startBranchName || '暂无数据'  }}</view>
                    <view class="tit">起运地</view>
                </view>
                <view>
                    <image class="car" src="@/assets/images/homePage/shouye_img_qianwang@3x.png" />
                </view>
                <view>
                    <view class="content">{{ item.destinationBranchName || '暂无数据' }}</view>
                    <view class="tit">目的地</view>
                </view>
            </view>
            <view class="list">
                <view class="it">
                    <view>货物信息：{{ item.goodsInfo[0]?.goodsName }}，</view>
                    <view
                        :style="{ color: item.goodsInfo[0]?.upNumber && item.goodsInfo[0]?.upNumber !== item.goodsInfo[0]?.goodsNumber ? '#0966FF' : '#666' }">
                        {{ filterGoodsNum(item.goodsInfo[0]) }}</view>
                    <view>{{ filterGoodsInfo(item.goodsInfo[0]) }}</view>
                </view>
                <view class="it">下单时间：{{ filterTime(item.billingTime) || '暂无数据' }}</view>
            </view>
            <view class="bottom">
                <view class="btn_box">
                    <nut-button class="btn btn1" @click.stop="cancel(item.ssoId)">取消订单</nut-button>
                    <nut-button class="btn btn2" @click.stop="toConfirmPage(item)">确认订单</nut-button>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script setup lang='ts'>
import { OrderListType } from '@/type/index'
import useOrderStore from '@/store/order';
import Taro from '@tarojs/taro';
import dayjs from 'dayjs'
import { getLogisticsInfo } from '@/@api/order';
import { Order } from '@nutui/icons-vue-taro';
import {  ref  } from "vue";
import { cancelOrder } from "@/@api/wait"; // wait的接口


import logisticsInfoStore from "@/store/logistics";
const logisticsStore = logisticsInfoStore();


const props = defineProps<{
    item,
}>()

const item = props.item || []

const orderStore = useOrderStore()

const allPay = ref(0);//待付款

// 计算待付款 
item.costList.forEach((item) => {
    allPay.value = allPay.value + (item.actualMoney - item.paidMoney)
});

// 运单二维码
function toCode() {
    console.log('跳转去运单二维码')
}


// 跳转去对应的详情页
function toInfoPage() {
    orderStore.orderInfo = item
    Taro.navigateTo({
        url: '/pages2/waybillPage/confirmInfo'
    })
}


const emit = defineEmits(['cancel']); // 触发父组件里的@search

// 取消订单
async function cancel(ssoId) {
    const res = await cancelOrder({ ssoId })
    if (res.data.code == 200) {
        Taro.showToast({
            icon: 'success',
            title: '取消运单成功'
        })
        emit('cancel');
    } else {
        Taro.showToast({
            icon: 'error',
            title: '取消失败'
        })
    }
}

// 跳转到确认订单页
function toConfirmPage(item: OrderListType) {
    orderStore.orderInfo = item
    Taro.navigateTo({
        url: '/pages2/confirmPage/index'
    })
}

// 复制订单标号
const copy = (msg) => {
    Taro.setClipboardData({
        data: msg,
        success: function (res) {
            Taro.getClipboardData({
                success: function (res) {
                    console.log(res.data) // data
                    Taro.showToast({
                        title: `复制成功`,
                        icon: 'success',
                        duration: 2000,
                    })
                }
            })
        }
    })
}

// 过滤时间
function filterTime(val) {
    return dayjs(val).format("YYYY-MM-DD HH:mm:ss")
}

// 过滤货物件数
// function filterGoodsNum(val) {
//     if (val) {
//         const { upNumber, goodsNumber } = val;
//         let goodsNum;
//         if (goodsNumber) {
//             if (upNumber !== goodsNumber) {
//                 goodsNum = upNumber !== 0 ? upNumber + '/' + goodsNumber : goodsNumber
//             } else {
//                 goodsNum = goodsNumber
//             }
//         }
//         return (
//             `${goodsNum}件，`
//         );
//     }
// }

// 过滤货物件数
function filterGoodsNum(val) {
    const { upNumber, goodsNumber } = val;
    let goodsNum;
    if (goodsNumber) {
        if (Number(upNumber) !== Number(goodsNumber)) {
            goodsNum = Number(upNumber) !== 0 ? '(' + Number(upNumber) + '/' + Number(goodsNumber) + ')' : Number(goodsNumber)
        } else {
            goodsNum = Number(goodsNumber)
        }
    }
    return (
        `${goodsNum}件`
    );
}

// 过滤货物重量体积包装
function filterGoodsInfo(val) {
    if (val) {
        const { weigh, goodsVolume, packing } = val;
        return (
            `${weigh || ''}kg，${goodsVolume || ''}m³，${packing || ''}`
        );
    }
}



</script>

<style lang="scss">
.list_item {
    width: 702rpx;
    margin: 8rpx auto;
    padding-top: 0 !important;
}

.card {
    margin: 16rpx auto;
    background: #fff;
    border-radius: 10rpx;
    padding: 24rpx;
    box-sizing: border-box;

    .top {
        width: 654rpx;
        font-size: 22rpx;
        color: #252525;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .status {
            display: inline-block;
            height: 40rpx;
            line-heifht: 40rpx;
            text-align: center;
            background: #ffeddb;
            color: #FF8F1F;
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            border-radius: 10rpx;
        }
    }

    .center {
        width: 580rpx;
        margin: 36rpx auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        .content {
            font-size: 28rpx;
            color: #252525;
            font-weight: bold;
        }

        .tit {
            font-size: 24rpx;
            color: #999;
        }

        .car {
            width: 224rpx;
            height: 56rpx;
        }
    }

    .list {
        width: 654rpx;
        margin: 36rpx auto;
        background: #f5f5f5;
        color: #666;
        font-size: 24rpx;
        padding: 12rpx;
        box-sizing: border-box;
        border-radius: 10rpx;

        .it {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 10rpx;
        }
    }

    .bottom {
        width: 654rpx;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20rpx;

        .need_pay {
            color: #FF8F1F;
            font-size: 24rpx;
        }

        .btn_box {
            display: flex;
            justify-content: center;
            align-items: center;

            .btn {
                display: inline-block;
                height: 56rpx;
                line-height: 56rpx;
                border-radius: 88rpx;
                padding: 12px 24px;
                text-align: center;
                font-size: 24rpx;
                box-sizing: border-box;
            }

            .btn1 {
                border: 1rpx solid #C4C4C4;
                color: #252525;
                margin: 0 16rpx;
            }

            .btn2 {
                border: 1rpx solid #0966FF;
                color: #0966FF;
            }
        }

    }
}
</style>